<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
    <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
        <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
        <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
        <link rel="stylesheet" href="../js/easyui/themes/icon.css" />

        <script type="text/javascript">
        $(function(){
            $("#grid").datagrid({
                columns : [[
                    {
                        field:'id',
                        title:'编号',
                        width: 100,
                        editor : {
                            type: 'validatebox',
                            options: {
                                required : true
                            }
                        }
                    },
                    {
                        field:'name',
                        title:'商品名称',
                        width: 200,
                        editor : {
                            type: 'validatebox',
                            options: {
                                required : true
                            }
                        }
                    },
                    {
                        field:'price',
                        title:'商品价格',
                        width: 200,
                        editor : {
                            type: 'validatebox',
                            options: {
                                required : true
                            }
                        }
                    }
                ]],
                toolbar : [
                    {
                        id:'add',
                        text:'添加',
                        iconCls:'icon-add',
                        handler : function(){
                            // 判断正在编辑就不可以插入新的一行
                            if(currentEditIndex != undefined){
                                // 正在编辑
                                return ;
                            }
                            // 插入一行新的数据，到首行
                            $("#grid").datagrid('insertRow', {
                                index : 0 ,
                                row : {} // 空对象
                            });

                            // 开启编辑状态
                            $("#grid").datagrid('beginEdit',0);

                            // 保存全局变量
                            currentEditIndex = 0 ;
                        }
                    },



                    {

                        id :'edit',
                        text:'编辑',
                        iconCls:'icon-edit',
                        handler: function(){
                            if(currentEditIndex != undefined){
                                //正在编辑
                                return ;
                            }
                            //获取到选中行
                            var row = $("#grid").datagrid('getSelected');
                            var index = $("#grid").datagrid('getRowIndex',row);
                            //编辑第一行
                            $("#grid").datagrid('beginEdit',index);
                            //保存到全局变量
                            currentEditIndex = index;
                        }

                    },
                    {
                        id:'save',
                        text:'保存',
                        iconCls:'icon-save',
                        handler : function(){
                            // 保存编辑效果
                            $("#grid").datagrid('endEdit',currentEditIndex);
                        }
                    },
                    {
                        id:'cancel',
                        text:'取消',
                        iconCls:'icon-cancel',
                        handler : function(){
                            // 保存编辑效果
                            $("#grid").datagrid('cancelEdit',currentEditIndex);
                        }
                    }
                ],
                url : 'product.json',
                singleSelect : true ,
                onAfterEdit : function(rowIndex, rowData, changes){
                    // 当保存成功后 才会触发
                    currentEditIndex = undefined;
                },
                // 保存成功之后 事件触发
                onCancelEdit : function(rowIndex,rowData){
                    currentEditIndex = undefined;
                }
            });

            //全局变量
            var currentEditIndex;
        });

        </script>
<body>

<table id="grid"></table>
</body>
</html>